<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from "vue-router";
// import function to register Swiper custom elements
import { register } from 'swiper/element/bundle';
// register Swiper custom elements
const router = useRouter();
    register();

interface InState {
    fileBaseUrl: string;
}
let state = ref<InState>({
    fileBaseUrl: ""
})

const formatNumber = (value: number): string => {
    return Number.isInteger(value) ? value.toString() : value.toFixed(2);
};

// 获取当天日期
const timeDate = new Date().toLocaleString();

import { getConfigKey } from "@/components/three/config";
import { FuelBunkerTRecordSummary} from "@/api";
const coalData = ref<any>({})
const getFuelBunkerTRecordSummary = () => {
    FuelBunkerTRecordSummary().then(res=>{
        console.log('概览',res.data)
        coalData.value = res.data;
        coalData.value.bunkers.forEach((b: any) => {
            if (b.imageNotAvailable) {
                b.imageUrl = "../assets/img/ph_3d.jpg";
            }
            else {
                var fileName =
                    state.value.fileBaseUrl +
                    b.id +
                    "Stockyard" +
                    "/" +
                    b.imageUrl +
                    "/" +
                    b.imageUrl +
                    (b.useNewImage ? ".txt.jpg" : ".txt.bmp");

                b.imageUrl = fileName;
            }
        });
    })
}

onMounted(() => {
    getConfigKey("bunkerFileUrl").then(response => {
        state.value.fileBaseUrl = response.data;
    });
    getFuelBunkerTRecordSummary();
});

function view3D(data: { id: string, executeId?: number }) {
    if (!data.executeId) {
        router.push(`/stock/yard?bunkerId=${data.id}`);
    }
    else {
        router.push(`/stock/yard?bunkerId=${data.id}&executeId=${data.executeId}`);
    }
}
</script>
<template>
    <div class="flex_bg">
        <div class="overview_title">
            <div class="name">煤场整体储煤及可以预测</div>
            <div class="time">统计数据截止日期：{{ timeDate }}</div>
            <div class="btn"></div>
        </div>
        <div class="stati_info mt20">
            <div class="item">
                <h3>库存情况</h3>
                <ul>
                    <li>
                        <span>厂内最大存煤能力(吨)</span>
                        <p>{{ coalData?.storageSummary?.maxCapability }}</p>
                    </li>
                    <li>
                        <span>厂内当前库存(吨)</span>
                        <p>{{ coalData?.storageSummary?.currentBalanceOfStorage }}</p>
                    </li>
                    <li>
                        <span>在途煤量(吨)</span>
                        <p>{{ coalData?.storageSummary?.coalAmountInDelivery }}</p>
                    </li>
                    <li>
                        <span>剩余库存空间(吨)</span>
                        <p>{{ coalData?.storageSummary?.availableCapability }}</p>
                    </li>
                </ul>
            </div>
            <div class="item">
                <h3>预估可用天数</h3>
                <ul>
                    <li>
                        <span>80%负荷可用天数</span>
                        <p>{{ coalData?.availableDaysEstimation?.availableDaysOn80PercentsLoads.toFixed(1) }}</p>
                    </li>
                    <li>
                        <span>全部机组满负荷可用天数</span>
                        <p>{{ coalData?.availableDaysEstimation?.availableDaysOnFullLoads.toFixed(1) }}</p>
                    </li>
                    <li>
                        <span>当前日耗煤量可用天数</span>
                        <p>{{ coalData?.availableDaysEstimation?.availableDaysOnDailyConsume.toFixed(1) }}</p>
                    </li>
                    <li>
                        <span>30天日均耗煤可用天数</span>
                        <p>{{ coalData?.availableDaysEstimation?.availableDaysOn30DaysAverage.toFixed(1) }}</p>
                    </li>
                </ul>
            </div>
            <div class="item">
                <h3>来煤质量情况</h3>
                <ul>
                    <li>
                        <span>硫加权平均值</span>
                        <p>{{coalData?.coalInQuality?.averageOfSulfurWeighting.toFixed(2)}}%</p>
                    </li>
                    <li>
                        <span>热值加权平均值</span>
                        <p>{{coalData?.coalInQuality?.averageOfHeatWeighting.toFixed(2)}}</p>
                    </li>
                    <li>
                        <span>挥发分加权平均值</span>
                        <p>{{coalData?.coalInQuality?.averageOfVolatileWeighting.toFixed(2)}}%</p>
                    </li>
                    <li>
                        <span>灰分加权平均值</span>
                        <p>{{coalData?.coalInQuality?.averageOfAshWeighting.toFixed(2)}}%</p>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <div class="flex_bg mt15">
        <div class="overview_title">
            <div class="name">{{ coalData.powerPlantInventorySummary?.plantName }}({{ coalData.powerPlantInventorySummary?.statusDate }})</div>
            <div class="time">单位：万吨、天、列</div>
            <!-- <div class="btn"><el-button type="primary" color="#2565C8">下载表报</el-button></div> -->
        </div>
        <div class="table_info mt15">
            <table>
                <tr>
                    <th rowspan="2">电厂</th>
                    <th rowspan="2">厂内最大存煤能力</th>
                    <th colspan="8">昨日情况</th>
                    <th colspan="6">当日情况</th>
                </tr>
                <tr>
                    <th>进煤</th>
                    <th>耗煤</th>
                    <th>厂内库存</th>
                    <th>80%负荷可用天数</th>
                    <th>30天日均耗煤可用天数</th>
                    <th>请车</th>
                    <th>批车</th>
                    <th>装车</th>
                    <th>在途总量(万吨)</th>
                    <th>在途火车(列)</th>
                    <th>在途船运(万吨)</th>
                    <th>当日预计到煤</th>
                    <th>预计当日24:00厂内库存</th>
                    <th>机组运方式</th>
                </tr>
                <tr>
                    <td>{{ coalData.powerPlantInventorySummary?.plantName }} </td>
                    <td>{{ coalData.powerPlantInventorySummary?.maxCapability }}</td>
                    <td>{{ coalData.powerPlantInventorySummary?.summaryOfYesterday?.takenIn }}</td>
                    <td>{{ coalData.powerPlantInventorySummary?.summaryOfYesterday?.consumed }}</td>
                    <td>{{ coalData.powerPlantInventorySummary?.summaryOfYesterday?.currentBalanceOfStorage }}</td>
                    <td>{{ coalData.powerPlantInventorySummary?.summaryOfYesterday?.availableDaysOn80PercentsLoads }}</td>
                    <td>{{ coalData.powerPlantInventorySummary?.summaryOfYesterday?.availableDaysOn30DaysAverage }}</td>
                    <td>{{ coalData.powerPlantInventorySummary?.summaryOfYesterday?.truckCalled }}</td>
                    <td>{{ coalData.powerPlantInventorySummary?.summaryOfYesterday?.truckApproved }}</td>
                    <td>{{ coalData.powerPlantInventorySummary?.summaryOfYesterday?.truckOnLoad }}</td>
                    <td>{{ coalData.powerPlantInventorySummary?.summaryOfToday?.totalCoalInDelivery }}</td>
                    <td>{{ coalData.powerPlantInventorySummary?.summaryOfToday?.transInDelivery }}</td>
                    <td>{{ coalData.powerPlantInventorySummary?.summaryOfToday?.coalInDeliveryByShip }}</td>
                    <td>{{ coalData.powerPlantInventorySummary?.summaryOfToday?.estimatedCoalArrivedToday }}</td>
                    <td>{{ coalData.powerPlantInventorySummary?.summaryOfToday?.estimatedCapacityTodayByMidnight }}</td>
                    <td>{{ coalData.powerPlantInventorySummary?.summaryOfToday?.deliveryMeans }}</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="flex_bg2 mt15 overview_coal" >
        <swiper-container style="padding:0 10px;" :slides-per-view="3" :space-between="0" :pagination="{clickable :true,}" >
            <swiper-slide v-for="(item,index) in coalData.bunkers" :key="index">
                <div class="overview_coal_item">
                    <div class="title">{{ item.name }}</div>
                    <div class="item_bg">
                        <div class="model3d">
                            <el-image :src="item.imageUrl" fit="contain"></el-image>
                            <p @click="view3D(item)">查看三维模型</p>
                        </div>
                        <ul class="info">
                            <li>
                                <span>总存煤量(吨)</span>
                                <p>{{ item.coalTotalStored }}</p>
                            </li>
                            <li>
                                <span>剩余库存空间(吨)</span>
                                <p>{{ item.availableCapacity }}</p>
                            </li>
                            <li>
                                <span>存煤可用(天)</span>
                                <p>{{ item.availableDays.toFixed(1) }}</p>
                            </li>
                            <li>
                                <span>今日进煤量(吨)</span>
                                <p>{{ item.coalTakenInToday }}</p>
                            </li>
                            <li>
                                <span>今日耗煤量(吨)</span>
                                <p>{{ item.coalCostToday }}</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </swiper-slide>
        </swiper-container>
    </div>
</template>
<style scoped lang="scss">
.flex_bg2{
    background: #F6FAFE;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #E0E5ED;
}
.overview_coal{
    .overview_coal_item{
        padding:20px 10px 30px;
        .item_bg{
            background: #F7FBFC;
            box-shadow: 3px 3px 8px 1px rgba(4,50,123,0.16);
            border-radius: 6px 6px 6px 6px;
            overflow: hidden;
        }
        .title{
            text-align: center;
            font-weight: bold;
            font-size: 18px;
            color: #3D4755;
            line-height: 20px;
            padding-bottom: 20px;
        }
        .info{
            background: #fff;
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            flex-wrap: wrap;
            padding:10px 0;
            li {
                padding: 10px 10px 10px 35px;
                width: 33.333%;
                position: relative;
                cursor: pointer;
                &:last-child{
                    margin-right: auto;
                }
                &::before {
                    content: ' ';
                    position: absolute;
                    left: 15px;
                    top: 16px;
                    width: 12px;
                    height: 12px;
                    background: #2565C8;
                    border-radius: 50%;
                }
                span {
                    display: block;
                    font-size: 15px;
                    color: #667581;
                    line-height: 24px;
                }
                p {
                    font-weight: bold;
                    font-size: 20px;
                    color: #3B4552;
                    line-height: 24px;
                    margin-top: 5px;
                }
            }
        }
        .model3d{
            position: relative;
            width: 100%;
            height: 390px;
            display: flex;
            align-items: center;
            justify-content: center;
            .ph{
                width: 100%;
                height: 300px;
                object-fit: contain;
            }
            p{
                position: absolute;
                right: 0;
                bottom: 0;
                width: 122px;
                height: 40px;
                background: #00B386;
                border-radius: 2px 2px 2px 2px;
                font-weight: 500;
                font-size: 15px;
                color: #FFFFFF;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
            }
        }
    }
}
.overview_title{
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .name{
        width: 100%;
        font-weight: bold;
        font-size: 18px;
        color: #3D4755;
        line-height: 20px;
    }
    .time{
        width: 100%;
        text-align: center;
        font-size: 16px;
        color: #2565C8;
        line-height: 20px;
    }
    .btn{
        width: 100%;
        text-align: right;
    }
}
.bar_chart_main {
    width: 100%;
    height: 500px;
    margin-top: 20px;
}

.informa_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;

    .informa_3d {
        flex-shrink: 0;
        width: 320px;

        h3 {
            font-size: 18px;
            line-height: 30px;
            font-weight: bold;
        }
    }

    .table_info {
        td {
            font-size: 14px;
        }

        th {
            font-size: 14px;
        }
    }

    ul {
        flex-shrink: 0;
        width: 190px;
    }

    li {
        margin-top: 10px;
        padding: 10px 10px 10px 35px;
        position: relative;
        cursor: pointer;

        &::before {
            content: ' ';
            position: absolute;
            left: 15px;
            top: 18px;
            width: 12px;
            height: 12px;
            background: #2565C8;
            border-radius: 50%;
        }

        span {
            display: block;
            font-size: 16px;
            color: #667581;
            line-height: 0px;
            line-height: 30px;
        }

        p {
            font-weight: bold;
            font-size: 20px;
            color: #3B4552;
            line-height: 30px;
        }
    }
}

.informa_title {
    font-weight: bold;
    font-size: 22px;
    color: #3D4755;
    line-height: 30px;
    text-align: center;

}

.stati_info {
    display: flex;
    align-items: stretch;
    justify-content: space-between;

    .item {
        width: 32%;
        flex-shrink: 0;

        h3 {
            text-align: center;
            height: 45px;
            line-height: 45px;
            background: #CCDDF9;
            border-radius: 4px 4px 4px 4px;
            font-weight: bold;
            font-size: 18px;
            color: #092A5F;
        }

        ul {
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            flex-wrap: wrap;

            li {
                width: 48%;
                background: #fff;
                border-radius: 4px 4px 4px 4px;
                border: 1px solid #E0E5ED;
                margin-top: 10px;
                padding: 10px 10px 10px 35px;
                position: relative;
                cursor: pointer;

                &::before {
                    content: ' ';
                    position: absolute;
                    left: 15px;
                    top: 18px;
                    width: 12px;
                    height: 12px;
                    background: #2565C8;
                    border-radius: 50%;
                }

                &:hover {
                    border: 1px solid #2565C8;
                }

                span {
                    display: block;
                    font-size: 16px;
                    color: #667581;
                    line-height: 0px;
                    line-height: 30px;
                }

                p {
                    font-weight: bold;
                    font-size: 20px;
                    color: #3B4552;
                    line-height: 30px;
                }
            }
        }
    }
}

.deadline {
    font-size: 15px;
    color: #2565C8;
    line-height: 30px;
}

.statis_tabs {
    display: flex;
    align-items: center;
    justify-content: center;

    ul {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #2565C8;
        border-radius: 4px;
        overflow: hidden;

        li {
            width: 210px;
            line-height: 44px;
            text-align: center;
            font-weight: 500;
            font-size: 16px;
            color: #3B4552;
            cursor: pointer;

            &.hover {
                color: #fff;
                background: #2565C8;
            }
        }
    }
}
</style>